<template>
  <view class="visit">
    <globalNavBar title="选择日期"/>
    <view class="container">
      <view class="row1">
        <view class="row1-box1">
          <view class="title">选择参观日期</view>
          <view class="date">{{package.month}}</view>
        </view>
        <view class="row1-box2">
          <view class="item" v-for="item in package.date_list" :class="item.is_active == 1 ? 'active' : ''"  @click="getTicket(item.zh_date)">
            <view class="week" >
              <view class="zh">{{ item.zh_date }}</view>
              <view class="en">{{ weekData[item.zh_date] }}</view>
            </view>
            <view class="day" :class="item.is_today == 1 ? 'today' : ''">
              <view class="num">{{ item.en_date }}</view>
              <view class="status">{{ item.status_text }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="row2">
        <view class="title">入馆时段</view>
        <view class="time">
          <view class="time-item" @click="checkTicket(1)" :class="is_checkam_ticket == 1 ? 'ticket_active' : ''">
            <view class="left">
              <view class="t">{{ currentSlots.am.time }}</view>
              <view class="slots">{{ currentSlots.am.zh }}</view>
            </view>
            <view class="right">
              <view class="icon-text">常</view>
              <view class="num">{{
                  currentSlots.am.count === 0 ? '无票' : currentSlots.am.count
                }}
              </view>
            </view>
          </view>
          <view class="time-item" @click="checkTicket(2)" :class="is_checkpm_ticket == 1 ? 'ticket_active' : ''">
            <view class="left">
              <view class="t">{{ currentSlots.pm.time }}</view>
              <view class="slots">{{ currentSlots.pm.zh }}</view>
            </view>
            <view class="right">
              <view class="icon-text">常</view>
              <view class="num">{{
                  currentSlots.pm.count === 0 ? '无票' : currentSlots.pm.count
                }}
              </view>
            </view>
          </view>
        </view>
        <view class="tips">
<!--          <view class="tips-item">
            <view class="text-icon">常</view>
            常设展览门票
          </view>
          <view class="tips-item">
            <view class="text-icon">临</view>
            临时展览门票
          </view>
          <view class="tips-item">
            <view class="text-icon">会</view>
            会员门票
          </view> -->
        </view>
      </view>
      <view class="row3">
        <view class="desc" v-html="yuyueinfo">
         
        </view>
      </view>
	  <view style="display: flex; justify-content: space-evenly; margin-bottom: 20rpx;">
		  <uv-button :custom-style="customStyle" type="primary" @click="mylist"  text="我的预约"></uv-button>
		  <uv-button :custom-style="customStyle2" type="primary" @click="open()" text="立即预约"></uv-button>
	  </view>
    </view>
	
	<uv-popup ref="popup"  mode="center" @change="change">
		<view style="width: 750rpx; height: min-height:400rpx; height: 1000rpx; overflow-y: scroll;">
			<uv-form labelPosition="left" :model="formData"  ref="form">
				<uv-form-item label="姓名" prop="formData.username" borderBottom required>
				  <uv-input v-model="formData.username" border="none" placeholder="请输入姓名"/>
				</uv-form-item>
				<uv-form-item label="手机号" labelWidth="140rpx" prop="formData.username" borderBottom required>
				  <uv-input v-model="formData.phone" border="none" placeholder="请输入手机号"/>
				</uv-form-item>
				<uv-form-item label="身份证号" labelWidth="140rpx" prop="formData.idnum" borderBottom
				              required>
				  <uv-input v-model="formData.idnum" border="none" placeholder="请输入身份证号"/>
				</uv-form-item>
				<uv-form-item label="脸部照片" prop="formData.face_images" labelWidth="200rpx" borderBottom
				              @click="toggleEnhnic" required>
				  <uv-upload
				    :fileList="fileList1"
				    name="1"
				
					:previewFullImage="true"
							@afterRead="afterRead" 
							@delete="deletePic" 
				  />
				</uv-form-item>
			
			<!-- 携带人 -->
            <view class="" v-for="(item, index) in joinUser" :key="index">
					<uv-form-item label="姓名(携带人)" labelWidth="240rpx" prop="formData.username1" borderBottom required>
					  <uv-input v-model="joinUser[index].name1" border="none" placeholder="请输入姓名"/>
					</uv-form-item>
					<uv-form-item label="身份证号(携带人)" labelWidth="240rpx" prop="idnum1" borderBottom
								  required>
					  <uv-input v-model="joinUser[index].name2" border="none" placeholder="请输入身份证号"/>
					</uv-form-item>
					<uv-form-item label="脸部照片(携带人)"  prop="formData.face_images1" labelWidth="240rpx" borderBottom
								   required>
					  <uv-upload
						:fileList="joinUser[index].filelist"
						:name="index"
					
						:previewFullImage="true"
								@afterRead="afterRead2(index,$event)" 
								@delete="deletePic2(index,$event)" 
					  />
					</uv-form-item>
				</view>
				<uv-form-item label="追加携带人" labelWidth="240rpx" prop="" borderBottom
							  >
							  <uv-button @click="addJoinUser" type="success" icon="plus" size="mini" text="追加"></uv-button>
				</uv-form-item>
			
				<view>
					<uv-button type="success" @click="sureGo()" text="确认"></uv-button>
				</view>
			</uv-form>
		</view>
	</uv-popup>
			
			
  </view>
</template>

<script>
	import http from '@/utils/request.js'
export default {
  data() {
    return {
		joinUser:[{name1: '', name2: '', name3: '', name4: '',filelist:[]}],
		fileList1:[],
		fileList2:[],
		formData:{
			username:'',
			idnum:'',
			face_images:'',
			phone:'',
		},
		
		is_checkam_ticket:false,
		is_checkpm_ticket:false,
		yuyueinfo:'',
		postData :{
			'yuyue_date':'',
			'artype':'',
		},
      weekData: {
        '一': 'Mon',
        '二': 'Tue',
        '三': 'Wed',
        '四': 'Thu',
        '五': 'Fri',
        '六': 'Sat',
        '日': 'Sun'
      },
      active: '1',
      currentSlots: {
        "am": {"count": 0, "time": "09:00-12:00", "zh": "上午"},
        "pm": {"count": 0, "time": "12:00-16:00", "zh": "下午"}
      },
      package: {}
    };
  },
  	computed: {
  			customStyle() {
  				return {
					width:'350rpx',
  					height: '80rpx',
  					background: '#3c9cff',
  					color: '#fff',
				
  					borderRadius: '20rpx' ,//圆角
  					// nvue中必须是下方的写法
  					'border-top-right-radius': '20rpx',
  					'border-bottom-left-radius': '20rpx',
  					'border-bottom-right-radius': '20rpx'
  				}
  			},
			customStyle2() {
				return {
					width:'350rpx',
					height: '80rpx',
					background: 'green',
					color: '#fff',
				
					borderRadius: '20rpx' ,//圆角
					// nvue中必须是下方的写法
					'border-top-right-radius': '20rpx',
					'border-bottom-left-radius': '20rpx',
					'border-bottom-right-radius': '20rpx'
				}
			}
  		},
  onLoad() {
    this.getPackage()
  },
  methods: {
	  addJoinUser(){
		  if(this.joinUser.length >= this.package.max_user){
			  uni.showToast({
			  	icon:'error',
			  	'title':'最大携带人数为'+this.package.max_user,
			  })
			  return false;
		  }
		 this.joinUser.push({name1: '', name2: '', name3: '', name4: '',filelist:[]}) 
	  },
	  mylist(){
		uni.navigateTo({
			url:'/pages/booking/mylist'
		})  
	  },
	  sureGo(){
		  if(!this.postData.yuyue_date){
			  uni.showToast({
			  	icon:'error',
			  	'title':'请选择日期',
			  })
			  return false;
		  }
		  if(!this.postData.artype){
			  uni.showToast({
			  	icon:'error',
			  	'title':'请选择时段',
			  })
			  return false;
		  }
		if(this.fileList1[0]){
			this.formData['face_images'] = JSON.parse(this.fileList1[0].url).data.url;	  
		}else{
			uni.showToast({
				icon:'error',
				'title':'请上传图片',
			})
			return false;
		}
		if(!this.formData.username){
			uni.showToast({
				icon:'error',
				'title':'请填写姓名',
			})
			return false;
		}
		if(!this.formData.idnum){
			uni.showToast({
				icon:'error',
				'title':'请填写身份证号',
			})
			return false;
		}
		let yuyuejoin = [];
		for(let i = 0; i < this.joinUser.length;i++){
			if(this.joinUser[i].name1){
				if(
					this.joinUser[i].name2 &&
					this.joinUser[i].filelist[0]
				){
					yuyuejoin.push({
						name1:this.joinUser[i].name1,
						name2:this.joinUser[i].name2,
						name3:JSON.parse(this.joinUser[i].filelist[0].url).data.url
					})
				}else{
					uni.showToast({
						icon:'error',
						'title':'如果存在携带人 请填写完善携带人信息',
					})
					return false;
				}
			}
		}
		this.formData['yuyue_joinuser_json'] = JSON.stringify(yuyuejoin);
		this.formData['yuyue_date'] = this.postData.yuyue_date;
		this.formData['artype'] = this.postData.artype;
		http.post('api/Yuyue/yuyue_submit',this.formData).then(function(data){
			if(data.code == 1){
				
				uni.showToast({
					icon:'success',
					title:"预约成功"
				})
				uni.navigateTo({
					url:'/pages/booking/mylist'
				})
			}else{
				uni.showToast({
					icon:'error',
					title:"预约失败"
				})
			}
		})
	  },
	open(){
		if(!this.postData.yuyue_date){
					  uni.showToast({
					  	icon:'error',
					  	'title':'请选择日期',
					  })
					  return false;
		}
		if(!this.postData.artype){
					  uni.showToast({
					  	icon:'error',
					  	'title':'请选择时段',
					  })
					  return false;
		}
		
		let amformat = this.package.date_list[0]['ticket']['am']['time'];
		let pmformat = this.package.date_list[0]['ticket']['pm']['time'];
		let artype_format = this.postData.artype == 1 ? amformat : pmformat;
		http.post('api/Yuyue/yuyue_pass',this.postData).then((res)=>{
			if(res.code == 1){
				uni.navigateTo({
					url:'/pages/booking/user_add_appointment?appointment_date='+this.postData.yuyue_date+'&artype='+this.postData.artype+'&artype_format='+artype_format
				})
			}else{
				uni.showToast({
					icon:'error',
					title:res.msg
				})
			}
		})

		//this.$refs.popup.open();
	},
     getPackage() {
		 var that = this;
		http.post('api/Yuyue/config',{}).then(function(data){
			that.package = {
			  "max_user": data.data.max_join_user,
			  "month": data.data.month,
			  "date_list": data.data.date_list,
			
			}
			that.yuyueinfo = data.data.yuyueinfo;
		})
    },
	getTicket(date){
		let dateList = this.package.date_list;
		
		let clickData = {};
		let ck = 0;
		for(let i = 0; i < dateList.length; i++){
			this.package.date_list[i].is_active = false;
		}
		for(let i = 0; i < dateList.length; i++){

			if(dateList[i].zh_date == date){
				ck = i;
				clickData = dateList[i].ticket;
				break;
			}
		}
		this.package.date_list[ck].is_active = true;
		this.postData.yuyue_date = this.package.date_list[ck].full_date;
	
		this.currentSlots = clickData;
		this.$forceUpdate();
	},
	checkTicket(type){
		if(!this.postData.yuyue_date){
			uni.showToast({
				icon:'error',
				title:'请先选择日期',
			})
			return;
		}
		if(type == 1){
			this.is_checkam_ticket = 1;
			this.is_checkpm_ticket = 2;
		}else{
			this.is_checkam_ticket = 2;
			this.is_checkpm_ticket = 1;
		}
		this.postData.artype = type;
	},
	// 删除图片
		deletePic(event) {
			this[`fileList1`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList1`].length
			lists.map((item) => {
				this[`fileList1`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList1`][fileListLen]
				this[`fileList1`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: http.common.baseUrl+'api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					 header: {
						'token': uni.getStorageSync('token') // 设置认证token
					  },
					success: (res) => {
						setTimeout(() => {
							resolve(res.data)
						}, 1000)
					}
				});
			})
		},
		deletePic2(index,event) {
			this.joinUser[index].filelist.splice(event.index, 1)
		},
		// 新增图片
		async afterRead2(index,event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			
			let fileListLen = this.joinUser[index].filelist.length;
			lists.map((item) => {
				this.joinUser[index].filelist.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this.joinUser[index].filelist[fileListLen]
				this.joinUser[index].filelist.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
	
		},
  }
}
</script>

<style lang="scss" scoped>
.visit {
  width: 100%;
  height: 100vh;

  .container {
    width: 100%;
    //min-height: calc(100vh - 44rpx - var(--window-top) - var(--navbar-height));
    background-color: #f2f2f2;

    .row1 {
      width: calc(100% - 60rpx);
      padding: 48rpx 30rpx 30rpx;
      background-color: #fff;

      &-box1 {
        width: 100%;
        @include flex(row, space-between, flex-end);

        .title {
          font-size: 36rpx;
        }

        .date {
          font-size: 24rpx;
          color: #3c9cff;
        }
      }

      &-box2 {
        margin-top: 48rpx;
        width: 100%;
        @include flex(row, space-between, flex-start);

        .item {
          @include flex(column, flex-start, center);

          .week {
            @include flex(column, flex-start, center);
            color: #405ab0;

            .zh {
              font-size: 22rpx;
            }

            .en {
              margin-top: 10rpx;
              font-size: 20rpx;
            }
          }

          .day {
            margin-top: 20rpx;
            border: 1px solid #eee;
            border-radius: 6rpx;
            padding: 8rpx;
            @include flex(column, center, center);
            color: #929294;

            .num {
              font-size: 26rpx;
            }

            .status {
              font-size: 22rpx;
            }
          }

          .today {
            position: relative;

            &::after {
              content: "今";
              position: absolute;
              top: 0;
              right: 4rpx;
              width: 20rpx;
              height: 20rpx;
              background-color: red;
              color: #fff;
              font-size: 18rpx;
              line-height: 1;
            }
          }
        }
      }
    }

    .row2 {
      width: calc(100% - 60rpx);
      margin-top: 48rpx;
      padding: 48rpx 30rpx 30rpx;
      background-color: #fff;

      .title {
        font-size: 36rpx;
      }

      .time {
        margin-top: 48rpx;
        width: 100%;
        @include flex(row, space-between, center);

        &-item {
          padding: 20rpx 30rpx;
          height: 80rpx;
          background-color: #dfe7f9;
          border-radius: 6rpx;
          @include flex(row, center, center);

          .left {
            margin-right: 10rpx;
            padding-right: 10rpx;
            border-right: 1px solid #eee;
            @include flex(column, center, center);
            color: #a0a9b8;

            .t {
              font-size: 26rpx;
            }

            .slots {
              font-size: 26rpx;
            }
          }

          .right {
            @include flex(row);

            .icon-text {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
              border: 1px solid #395992;
              border-radius: 50%;
              font-size: 28rpx;
              color: #395992;
              line-height: 1;
            }

            .num {
              font-size: 28rpx;
              color: #395992;
            }
          }
        }
      }

      .tips {
        margin-top: 48rpx;
        font-size: 28rpx;
        color: #929294;
        @include flex(row, space-between, center);

        &-item {
          @include flex(row, space-between, center);
          .text-icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
            border: 1px solid #395992;
            border-radius: 50%;
            font-size: 28rpx;
            color: #395992;
            line-height: 1;
          }
        }
      }
    }

    .row3 {
      margin-top: 48rpx;
      width: calc(100% - 60rpx);
      padding: 48rpx 30rpx 30rpx;
      background-color: #fff;

      .desc {
        //font-size: 24rpx;
      }
    }
	.active{
		background-color: #f2f2f2;
	}
	.ticket_active {
		background-color: #3c9cff !important;
	}
  }
}
</style>
